<template>
  <div class="module_container">
    <div class="module_title">
      <div class="title_text right" flex> 网格内企业信息</div>
    </div>

    <div class="content">
      <div class="top" flex="cross:center">
        <div class="circle_box" flex="main:center cross:center">
          <div ref="pie" class="pie" />
          <img src="@/assets/img_xinyong/module6/icon.png">
        </div>
        <div v-if="tableListCategory.length" class="legend_box">
          <div v-for="(item,index) in tableListCategory" :key="item.id" flex="main:justify">
            <div flex="cross:center" class="text_over" style="width:200px">
              <!-- <div class="icon " style="background: #46ACFF;" /> -->
              <div v-if="index === 0" class="icon" style="background: #FF2E33;" />
              <div v-else-if="index === 1" class="icon" style="background: #46ACFF;" />
              <div v-else class="icon " style="background: #FFAC2C;" />
              {{ item.exceptionDesc }}
            </div>
            <div>
              <img v-if="!!(item.id % 2)" style="display:inline-block;margin-left:15px" src="@/assets/img_qingqin/module5/up.png">
              <img v-else style="display:inline-block;margin-left:15px" src="@/assets/img_qingqin/module5/down.png">

              <span style="color: #7DFF6E">{{ transPercent(item.percent) }}</span>
            </div>
            <b style="color: #00F7FF;width:50px;text-align:right">{{ item.num }}</b>
          </div>
          <!-- <div flex="main:justify">
            <div flex="cross:center">
              <div class="icon" style="background: #FF2E33;" />
              税收异常上升
            </div>
            <div>
              <img style="display:inline-block;margin-left:15px" src="@/assets/img_qingqin/module5/down.png">
              <span style="color: #FF2E33;">42.26%</span>
            </div>
            <b style="color: #00F7FF;">36</b>
          </div>
          <div flex="main:justify">
            <div flex="cross:center">
              <div class="icon" style="background: #FFAC2C;" />
              税收异常下降
            </div>
            <div>
              <img style="display:inline-block;margin-left:15px" src="@/assets/img_qingqin/module5/down.png">
              <span style="color: #FFAC2C;">17.21%</span>
            </div>
            <b style="color: #00F7FF;">57</b>
          </div> -->
        </div>
      </div>
      <div class="sub_title">
        企业迁入迁出情况
      </div>
      <dv-decoration-2 style="width:100%;height:5px;" />
      <dv-decoration-2 style="width:100%;height:5px;transform:rotate(180deg)" />

      <div class="warning_table_layout">
        <div class="item header" flex="main:justify">
          <div v-for="(item,index) in headerList" :key="index" class="text_over" :style="`width:${item[1]};`">{{ item[0] }}</div>
        </div>
        <div class="body warning_scroll_layout" style="height:1300px">
          <div v-for="(item,index) in tableList" :key="index" class="item" flex>
            <div v-for="(subItem,i) in headerList" :key="i+''+index" :style="`width:${subItem[1]}`" class="text_over " @click="handleItem(item)">
              <span :style="{color:subItem[2] === 'processStatus'&& item[subItem[2]] === '已处理'?'yellow':''}">{{ item[subItem[2]]||'--' }}</span>
            </div>
          </div>
          <div v-if="!tableList.length" class="item" style="text-align:center">暂无数据</div>
        </div>
      </div>
    </div>

    <Modal ref="modal" v-model="showModal" :title="`${itemContent.company}`">
      <div class="table_detail">
        <!-- <div>返回</div> -->
        <div class="detail_content">
          <div flex>
            <div class="flex_1">公司名称：<span>{{ itemContent.company || '--' }}</span> </div>
            <div class="flex_1">公司地址：<span>{{ itemContent.dz || '--' }}</span> </div>
          </div>
          <div flex>
            <div class="flex_1">异常描述：<span>{{ itemContent.exceptionDesc || '--' }}</span> </div>
            <div class="flex_1">异常原因：<span>{{ itemContent.exceptionDetail || '--' }}</span> </div>
          </div>
          <div flex>
            <div class="flex_1">统一社会信用代码：<span>{{ itemContent.tyshxydm }}</span> </div>
            <div class="flex_1">时间：<span>{{ itemContent.inDate }}</span> </div>
          </div>
          <!-- <div flex="main:center">
            <div class="back_btn"
                 @click="handleClick"
            > 定位社区 </div>
          </div> -->
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
// import { optionBar1, optionPie } from './module7_option.js'
// import Charts from '@jiaminghi/charts'
import { listException, listExceptionCategory } from '@/api/community.js'
import Modal from '@/components/Modal/index'
export default {
  components: { Modal },
  data() {
    return {
      headerList: [
        ['时间', '150px', 'inDate'],
        ['内容', '420px', 'exceptionDesc'],
        ['预警对象', '300px', 'company'],
        ['处理状态', '220px', 'processStatus'],
        ['管理人', '110px', 'admin']
      ],
      tableList: [],
      currYear: new Date().getFullYear() - 1,
      gridId: 0,
      showModal: false,
      itemContent: {},
      tableListCategory: []
    }
  },
  created() {
    this.$nextTick(() => {
      // new Charts(this.$refs.bar).setOption(optionBar1)
      // new Charts(this.$refs.pie).setOption(optionPie)
      // new Charts(this.$refs.line).setOption(optionLine)
    })
    this.$eventBus.$on('changeCommunity', item => {
      this.listException(item.id)
    })
  },
  methods: {
    listException(id) {
      listException({ gridId: id || 2, year: this.currYear }).then(res => {
        this.tableList = res.data || []
      })
      listExceptionCategory({ gridId: id || 2, year: this.currYear }).then(res => {
        this.tableListCategory = res.data || []
      })
    },
    handleItem(item) {
      this.showModal = true
      this.itemContent = item
    },
    handleClick() {
      this.showModal = false
      this.$nextTick(() => {
        this.$router.push({ path: 'location', query: { address: this.itemContent.dz } })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 25px 40px;
  font-size: 28px;
  .circle_box {
    background: url("~@/assets/img_xinyong/module6/circle_bg.png") no-repeat;
    background-size: 100% 100%;
    width: 240px;
    height: 240px;
    margin-right: 20px;
    position: relative;
    & > .pie {
      width: 380px;
      height: 380px;
      position: absolute;
    }
  }
  .legend_box {
    position: relative;
    flex: 1;
    & > * {
      line-height: 100px;
      color: #bfdaff;
      .icon {
        height: 20px;
        width: 20px;
        background: olivedrab;
        margin-right: 12px;
      }
    }
  }
  .sub_title {
    margin-top: 20px;
    margin-bottom: 20px;
    background: url("~@/assets/img_xinyong/module6/sub_title_bg.png") no-repeat;
    width: 402px;
    height: 58px;
    line-height: 58px;
    // padding:20px;
    padding-left: 70px;
    font-size: 28px;
  }
}
</style>
